<template>
  <div class="flex flex-row items-center">
    <span class="text-color-main inline-block w-24 break-all font-semibold">{{ name }}</span>
    <template v-if="isUpdate">
      <a-tooltip class="inline-block" :title="disabled ? t('components.authList.adminTip') : ''">
        <a-checkbox
          :disabled="disabled"
          :checked="manageChecked"
          class="!ml-2 !mr-0 xxs:!ml-8"
          :indeterminate="!manageChecked && manageIndeterminate"
          @change="manageChange"
        >
          {{ t("aiot.role.manageAuth") }}
        </a-checkbox>
        <a-checkbox
          :checked="manageChecked || checkChecked"
          class="!ml-2 !mr-0 xxs:!ml-8"
          :disabled="disabled || manageChecked"
          :indeterminate="!manageChecked && !checkChecked && checkIndeterminate"
          @change="checkChange"
        >
          {{ t("aiot.role.checkAuth") }}
        </a-checkbox>
      </a-tooltip>
    </template>
    <span v-else-if="showAuthText" class="ml-2 sm:ml-28" :class="{ 'text-gray-400': !manageChecked && !checkChecked }">
      {{ authText }}
    </span>
  </div>
</template>
<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "/@/locales/useI18n";
import type { CheckboxProps } from "ant-design-vue";
const props = defineProps<{
  name: string;
  isUpdate?: boolean;
  manageChecked?: boolean;
  checkChecked?: boolean;
  showAuthText?: boolean;
  manageIndeterminate?: boolean;
  checkIndeterminate?: boolean;
  disabled?: boolean;
}>();
const emits = defineEmits(["update:manageChecked", "update:checkChecked", "change"]);

const { t } = useI18n();
const manageChange: CheckboxProps["onChange"] = (e) => {
  const checked = (e.target as HTMLInputElement).checked;
  emits("update:manageChecked", checked);
  emits("change", { type: "manageChecked", checked });
};

const checkChange: CheckboxProps["onChange"] = (e) => {
  const checked = (e.target as HTMLInputElement).checked;
  emits("update:checkChecked", checked);
  emits("change", { type: "checkChecked", checked });
};
// watch(
//   () => props.manageChecked,
//   (checked) => {
//     emits("change", { type: "manageChecked", checked });
//   }
// );
// watch(
//   () => props.checkChecked,
//   (checked) => {
//     emits("change", { type: "checkChecked", checked });
//   }
// );
const authText = computed(() => {
  if (props.manageChecked) {
    return t("aiot.role.hasManageAuth");
  } else if (props.checkChecked) {
    return t("aiot.role.checkAuth");
  } else {
    return t("aiot.role.noAuth");
  }
});
</script>
